@import './variables.scss';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: $font-family;
  font-size: $font-size-base;
  line-height: 1.6;
  color: $text-color;
  background-color: $background-color;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

// 通用样式类
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $spacing-md;
  
  @media (max-width: $breakpoint-mobile) {
    padding: 0 $spacing-sm;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-md;
  border: $border-width solid $border-color;
  border-radius: $border-radius;
  background-color: $secondary-color;
  color: $text-color;
  font-size: $font-size-base;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  
  &:hover {
    background-color: $hover-color;
  }
  
  &.btn-primary {
    background-color: $primary-color;
    color: $secondary-color;
    border-color: $primary-color;
    
    &:hover {
      background-color: lighten($primary-color, 10%);
    }
  }
}

.card {
  background-color: $secondary-color;
  border: $border-width solid $border-color;
  border-radius: $border-radius;
  padding: $spacing-md;
  margin-bottom: $spacing-md;
}

.input {
  width: 100%;
  padding: $spacing-sm;
  border: $border-width solid $border-color;
  border-radius: $border-radius;
  font-size: $font-size-base;
  background-color: $secondary-color;
  
  &:focus {
    outline: none;
    border-color: $primary-color;
  }
}

.textarea {
  @extend .input;
  resize: vertical;
  min-height: 100px;
}

// 响应式工具类
.hidden-mobile {
  @media (max-width: $breakpoint-mobile) {
    display: none !important;
  }
}

.hidden-desktop {
  @media (min-width: #{$breakpoint-mobile + 1px}) {
    display: none !important;
  }
} 